<!--
 * @Descripttion: 设备履历
 * @version: 
 * @Author: ye_zhiguo
 * @Date: 2021-08-18 12:44:22
 * @LastEditTime: 2021-08-21 16:10:16
-->
<template>
    <div id="deviceDetails">
        <!-- <van-nav-bar  :title="deviceName" left-arrow @click-left="back" /> -->
        <Theader :title="deviceName" :headerStyle="{color:'#333',backgroundColor: '#fff'}" :textStyle="{color:'#333'}"
            :titleStyle="{color:'#333'}">
            <template slot="header_arrow">
                <van-icon size="17" name="arrow-left" @click="back" />
            </template>
        </Theader>
        <van-tabs v-model="activeName">
            <van-tab title="运行参数" name="a"></van-tab>
            <van-tab title="设备履历" name="b"></van-tab>
        </van-tabs>
       <!-- 运行参数 -->
        <div class="out-main" v-show="activeName == 'a' ">
            <div class="in-main">
                <van-cell-group v-for="(item,i) in assetsList" :key="i">
                    <van-cell :title="item.text1" :value="item.text2" />
                </van-cell-group>
            </div>
            
        </div>

       <!-- 设备履历 -->
         <div class="out-main" v-show="activeName == 'b' ">
            <div class="in-main auto-box" style="height:calc(100% - 20px)">
                <van-steps direction="vertical" active="2">
                    <van-step v-for="(item,i1) in deviceList" :key="i1">
                        <div>
                            <span class="dynamicText">{{item.time}}</span>
                            <div v-for="(list,i2) in item.deviceDetailsList" :key="i2" class="test1">
                                <div v-if="list.recordType !== '巡视记录'" class="padding-border">
                                    <div class="common-box">
                                        <img :src="list.recordType | imgUrlFilter" class="icon-box">
                                        <span>{{list.recordType}}</span> 
                                    </div>
                                    <div :class="list.recordType=='缺陷记录'?'defectRecord':'hiddenRecord'">
                                        <span>{{list.recordText}}</span> 
                                    </div>
                                    <div v-if="list.registrant" class="common-box staicText">
                                        <span>登记人：</span>
                                        <span>{{list.registrant}}</span> 
                                    </div>
                                    <div v-if="list.registerTime" class="common-box staicText">
                                        <span>登记时间：</span>
                                        <span>{{list.registerTime}}</span> 
                                    </div>
                                </div>
                                <div  v-if="list.recordType == '巡视记录'">
                                    <div class="common-box">
                                        <img :src="list.recordType | imgUrlFilter" class="icon-box">
                                        <span></span>
                                        <span>{{list.recordType}}</span> 
                                    </div>
                                    <div class="tourRecord">
                                        <div>
                                            <span>未完成巡视：</span>
                                            <span>{{list.unTour}}</span> 
                                        </div>
                                        <div style="display:flex;">
                                            <span>巡视结果：</span>
                                            <span style="flex:1;">{{list.tourResult}}</span> 
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-step>
                </van-steps>
            </div>
        </div>
    </div>
</template>

<script> 
import Theader from "../component/header"
    export default {
        components: {
            Theader
        },
    data(){
        return{
            deviceName:'220KV断路器',
            deviceList:[{
                time:'2121-03-21',
                deviceDetailsList:[{
                    recordType:'缺陷记录',
                    recordText:'大量发热，有起火风险。2021/03/20',
                    registrant:'刘安之',
                    registerTime:'2021/02/12 12:00',
                },{
                    recordType:'隐患记录',
                    recordText:'大量发热，有起火风险。2021/03/20',
                    registrant:'刘安之',
                    registerTime:'2021/02/12 12:00',
                },{
                    recordType:'巡视记录',
                    unTour:'仪器出现问题，下午继续',
                    tourResult:'巡视过程中出现隐患已登记尽快检修。',
                },]
            },{
                time:'2121-03-20',
                deviceDetailsList:[{
                    recordType:'缺陷记录',
                    recordText:'大量发热，有起火风险。2021/03/20',
                }]
            }],
            activeName: 'a',
            assetsList:[{
                text1:'设备状态：',
                text2:'运行'
            },{
                text1:'额定电流',
                text2:'4000A'
            },{
                text1:'额定电压',
                text2:'250KV'
            },{
                text1:'额定频率',
                text2:'50HZ'
            },{
                text1:'维护班组',
                text2:'城西变电运维二班'
            },{
                text1:'所属电站：',
                text2:'交流110KV八里桥变电站'
            },{
                text1:'间隔单元：',
                text2:'100 1号电容器单元'
            },{
                text1:'投运日期：',
                text2:'2019/01/01'
            }]
        }
    },
    filters:{
        imgUrlFilter(i){
            if(i == '缺陷记录'){
                return require('../../images/image122-warn.png')
            }else{
            }
        }
    },
    methods:{
        /**
         * @description: 返回
         */
        back(){
            this.$router.go(-1)
        },
    }
}
</script>

<style>
#deviceDetails{
    font-size: 0.8125rem;
}
#deviceDetails .out-main{
    height:calc(100vh - 7rem);
    padding: 11px;
    background-color: #F5F6F7;
}
#deviceDetails .auto-box{
    height:calc(100% - 20px);
    overflow: auto;
}
#deviceDetails .in-main{
    padding: 10px;
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
    background-image: url(../../images/image_pm_form_bg.png);
    background-size: 100% 100%;
}
#deviceDetails .common-box{
    display: flex;
    align-items: center;
    line-height: 30px;
}
#deviceDetails .padding-border{
    padding: 1rem 0;
    border-bottom:1px solid #ccc;
}

#deviceDetails .dynamicText{
  color: #333333;
  font-weight: bold;
  font-size: 1.0625rem;
}

#deviceDetails .staicText{
  color: #666666;
}
#deviceDetails .tourRecord{
    color: rgb(103,149,251);
    background: rgb(246,249,254);
    line-height: 30px;
    border-radius:4px;
    padding-left: 10px;
}
#deviceDetails .defectRecord{
    color: rgb(240,85,90);
    background: rgb(254,247,247);
    line-height: 30px;
    border-radius:4px;
    padding-left: 10px;
}
#deviceDetails .hiddenRecord{
    color: rgb(251,152,58);
    background: rgb(255,245,250);
    line-height: 30px;
    padding-left: 10px;
    border-radius:4px;
}

#deviceDetails .van-steps{
    background: transparent;
}
#deviceDetails .icon-box{
    height: 0.8125rem;
    width:0.8125rem;
    padding-right: 0.8125rem;
}
#deviceDetails .test1:last-child .padding-border{
    border: none;
}
</style>
